<template>
  <el-cascader popper-class="cascader-hide-radio"
    ref="areaRef"
    v-model="area"
    :props="prop"
    placeholder="请选择所属区域"
    :disabled="disabled"
    :style="{ width: width }"
    :clearable="clearable"
    @change="changeSelect"
  />
</template>

<script setup>
import areaCode from '@/components/area-cascader/areaCode.js'
import { gerAreaByCode } from '@/api/api'
import {
  watch,
  computed,
  ref,
  onMounted,
  getCurrentInstance,
  reactive
} from 'vue'
const emit = defineEmits(['update:modelValue', 'areaChange','update:areaCode','update:lastCode'])
const props = defineProps({
  lastCode:{
    type:String,
    default:''
  },
  areaCode:{
    type:[String,Number],
    default:''
  },
  clearable: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '160px'
  },
  //  数据回显数组 ['省份id','市区id',...]
  defaultArea: {
    type: [String, Array, Number, null, undefined],
    default() {
      // 不传
      return [areaCode.defaultProvince]
    }
  },
  // 组件可选层级 0.只有省份 1.省、市 2.省、市、区 3.省、市、区、乡镇 4.省、市、区、乡镇、街道
  maxLevel: {
    type: Number,
    default: 4
  },
  // 用来控制前面几层不能选择 0.省份disabled 1.市disabled 2....
  // 如果设置了disabledLevel 必须传正确的defaultArea进来
  disabledLevel: {
    type: [Number, String],
    default: 0
  },
  // 父子强制关联 true:可选任意一级  false:只能选中最后一级
  strictly: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
})
const areaRef = ref(null)
const area = ref([])
const calLeaf = (item,level)=>{
    if(props.maxLevel){
      if(item.isBelow){
        return item.isBelow
      }else{
        return level >= props.maxLevel
      }
    }else {
      return item.isBelow
    }
  }
const prop = reactive({
  lazy: true,
  label: 'name',
  checkStrictly: true,
  lazyLoad: async (node, resolve) => {
    const { data, level } = node
    if (data && data.children && data.children.length !== 0) {
      return resolve([])
    }
    if (level === 0) {
      // 获取全部省份
      const r = await getArea('000000')
      const targetData = []
      for (const item of r.data) {
        const temp = {
          id: item.id,
          name: item.name,
          value: item.id,
          disabled: calDiasbled(level),
          leaf: false
        }
        if (props.disabledLevel > -1) {
          // eslint-disable-next-line eqeqeq
          // item.id == props.defaultArea[level] && targetData.push(temp)
          // 只push广东省
          item.id == areaCode.defaultProvince && targetData.push(temp)
        } else {
          targetData.push(temp)
        }
      }
      resolve(targetData)
    } else {
      // 根据省ID获取市
      const r = await getArea(data.id)
      const targetData = []
      for (const item of r.data) {
        const temp = {
          id: item.id,
          name: item.name,
          value: item.id,
          disabled: calDiasbled(level),
          // leaf: level >= props.maxLevel,
          leaf: calLeaf(item,level),
          loading: false
        }
        if (props.disabledLevel) {
          // 如果设置了不可选的level  node-level
          if (level > props.disabledLevel) {
            targetData.push(temp)
          } else {
            // eslint-disable-next-line eqeqeq
            item.id == props.defaultArea[level] && targetData.push(temp)
          }
        } else {
          targetData.push(temp)
        }
      }
      resolve(targetData)
    }
  }
})

onMounted(() => {
  if (props.defaultArea && props.defaultArea.length > 0) {
    props.defaultArea.forEach(item => {
      item && area.value.push(item)
    })
  }
})


const calDiasbled = nodeLevel => {
  if (!props.strictly) {
    return false
  }
  // 如果是有层级选择限制的 && nodeLevel< 层级限制的level
  if (props.disabledLevel > 0) {
    if (nodeLevel < props.disabledLevel) {
      return true
    } else {
      return false
    }
  } else {
    return false
  }
}


const changeSelect = val => {
    emit('areaChange', [...val].slice(-1)[0])
    emit('update:areaCode', [...val].slice(-1)[0])
    emit('update:lastCode', [...val].slice(-1)[0])
    areaRef.value.getCheckedNodes()[0].isLeaf && areaRef.value.togglePopperVisible(false)
}

const getArea = code => {
  return gerAreaByCode(code)
}
</script>

<style lang="scss" scoped></style>
